<template>
  <el-dialog title="user" v-model="dialogFormVisible">
    <el-form
      :model="form"
      enctype="multipart/form-data"
      ref="formRef"
      :rules="rules"
    >
      <el-form-item label="name" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="age" prop="age" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="sex" prop="sex" :label-width="formLabelWidth">
        <el-input v-model="form.sex" autocomplete="off" placeholder="1 is male, 0 is female"></el-input>
      </el-form-item>
      <el-form-item label="email" prop="email" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">cancel</el-button>
        <el-button type="primary" @click="upload">confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessage, type FormInstance } from "element-plus";
import { computed, InputHTMLAttributes, onMounted, ref, watch } from "vue";
import * as userApi from "@/api/user";

const props = defineProps<{
  mode: 1 | 0;
  visible: boolean;
  dialogData?: any;
}>();
const formLabelWidth = ref("120px");

const form = ref({
  name: '',
  age: 0,
  sex: 0,
  email: '',
});

const floorValidator = (rule, value, callback) => {
  if (value < 1 || value > 9) {
    callback(new Error('min: 1, max: 9'));
  }
}
const rules = {
  name: [{ required: true, message: "please enter the name", trigger: "blur" }],
  age: [{ required: true, message: "please enter the age", trigger: "blur" }],
  sex: [{ required: true, message: "please enter the sex", trigger: "blur" }],
  email: [{ required: true, message: "please enter the email", trigger: "blur" }],
};

const mode = ref<0 | 1>(1);
const formRef = ref<FormInstance>();
const emit = defineEmits<{
  (event: "update:visible", val: boolean): void;
  (event: "upload"): void;
}>();
const dialogFormVisible = computed({
  get() {
    return props.visible;
  },
  set(val: boolean) {
    emit("update:visible", val);
  },
});
watch(
  () => props.visible,
  () => {
    if (!props.visible) {
      return;
    }
    if (props.mode === 0) {
      initEmptyDialog();
    } else {
      if (props.dialogData) {
        initDialogData(props.dialogData);
      }
    }
  }
);
const initEmptyDialog = () => {
  (Object.keys(form.value) as Array<keyof typeof form.value>).forEach((key) => {
    form.value[key] = '';
  });
  mode.value = 0;
};
const initDialogData = (data: any) => {
  Object.assign(form.value, data);
  mode.value = 1;
};

const upload = () => {
  // 只能添加
  userApi.registerByAdmin({
    ...form.value,
  }, { "Content-Type": "multipart/form-data" })
  .then(
    () => {
      dialogFormVisible.value = false;
      ElMessage({
        message: mode.value === 0 ? "add success" : "modify success",
        type: "success",
      });
      emit("upload");
    }
  )
  .catch(err => {
    ElMessage.error(err);
  });
};

</script>
<style scoped>
.isbn {
  position: relative;
}
.search {
  position: absolute;
  right: 10px;
}
.search:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
